<template>
  <view class="main">
    <view class="header">
      <view class="month-icon" @click="changeMonth('prev')">
        <tm-icon :font-size="27" color="orange" name="tmicon-angle-left"></tm-icon>
      </view>
      <text class="date">{{ showMonth }}</text>
      <view class="month-icon" @click="changeMonth('next')">
        <tm-icon :font-size="27" color="orange" name="tmicon-angle-right"></tm-icon>
      </view>
    </view>
    <view class="grid">
      <text class="week" v-for="(week, index) in weekHeader" :key="index">
        {{ week }}
      </text>
      <view v-for="(item, idx) in dates" :key="idx" v-show="showPage">
        <view class="day-box" v-if="item">
          <view class="day" v-if="!item.color" :class="{ 'today-active': item.isToday }">
            {{ item.day }}
          </view>
          <view class="day" v-else :style="{ background: item.color }">
            <tm-icon :font-size="25" color="white" name="tmicon-check"></tm-icon>
          </view>
          <text class="remark" v-if="item.remark">{{ item.remark }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import dayjs from 'dayjs';
  import type { PropType } from 'vue';

  type CalendarItem = {
    date: string;
    color: string;
    remark?: string;
  };

  const props = defineProps({
    month: {
      type: String,
      default: dayjs().format('YYYY-M'),
    },
    tags: {
      type: Array as PropType<CalendarItem[]>,
      default: [],
    },
  });

  const showPage = ref<boolean>(false);
  const dates = ref<any[]>([]);
  const today = dayjs().format('YYYY-M-D');
  const currentMonth = dayjs().format('YYYY-M');
  const showMonth = ref<string>(props.month);
  const weekHeader = ['日', '一', '二', '三', '四', '五', '六'];

  // 安排月份日期
  const arrangeDates = () => {
    const monthDays = [...new Array(dayjs(showMonth.value).daysInMonth()).keys()];
    let days;
    if (showMonth.value == currentMonth) {
      // 当前月份
      days = monthDays.map((i) => {
        let day = i + 1;
        let date = `${showMonth.value}-${day}`;
        let isToday = !!(dayjs(date).diff(today, 'day') === 0);
        let color = '';
        let remark = '';
        return { day, date, color, remark, isToday };
      });
    } else {
      // 非当前月
      days = monthDays.map((i) => {
        let day = i + 1;
        let date = `${showMonth.value}-${day}`;
        let isToday = false;
        let color = '';
        let remark = '';
        return { day, date, color, remark, isToday };
      });
    }

    const week = dayjs(`${showMonth.value}-1`).day();
    dates.value = [...new Array(week).fill(null), ...days];
  };
  arrangeDates();

  // 标注日期标签
  const tagDate = () => {
    if (props.tags.length == 0) {
      showPage.value = true;
      return;
    }
    dates.value.forEach((i) => {
      if (i) {
        let checkDate = props.tags.find((item) => dayjs(i.date).diff(item.date, 'day') === 0);
        if (checkDate) {
          i.color = checkDate.color;
          if (checkDate.remark) i.remark = checkDate.remark;
        }
      }
    });
    showPage.value = true;
  };

  const emits = defineEmits(['change']);

  // 改变月份
  const changeMonth = (type: string) => {
    if (type == 'next') {
      showMonth.value = dayjs(showMonth.value).add(1, 'month').format('YYYY-M');
    } else {
      showMonth.value = dayjs(showMonth.value).subtract(1, 'month').format('YYYY-M');
    }
    showPage.value = false;
    arrangeDates();
    emits('change', showMonth.value);
  };

  watch(
    () => props.tags,
    () => {
      tagDate();
    }
  );
</script>

<style lang="scss" scoped>
  .main {
    // background: lightgreen;
    background: #fff;
    padding: 10rpx 20rpx;

    .header {
      flex-direction: row;
      align-items: center;
      justify-content: center;
      padding-bottom: 30rpx;
      .month-icon {
        padding: 8rpx 5rpx;
        // background: lightgreen;
      }

      .date {
        font-size: 28rpx;
        padding: 0 75rpx;
        font-weight: 600;
        color: #525252;
      }
    }
  }
  .grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    column-gap: 5rpx;
    row-gap: 20rpx;
    // background: #becda6;
  }

  .week {
    border-bottom: 1rpx solid #f2f2f2;
    padding-bottom: 20rpx;
    text-align: center;
  }

  .day-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    // height: 85rpx;

    .day {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30rpx;
      font-weight: 600;
      color: #525252;
      width: 50rpx;
      height: 50rpx;
      border-radius: 12rpx;
      margin-bottom: 5rpx;
    }

    .today-active {
      color: white;
      background: orange;
    }

    .remark {
      font-size: 20rpx;
      padding: 0 10rpx;
      border-radius: 20rpx;
      background: orange;
      color: white;
    }
  }
</style>
